Jquery / UI / * Multi select - multi col with search
Select Box with search and multi col
-
Notes
2. scriptBootstrap 搜索建议插件 Modal title
- 不显示按钮;
showBtn: false
- 向上/下方向键,不自动选中值。
autoSelect: false
bootstrap combox 搜索建议插件
这是一个基于 bootstrap 按钮式下拉菜单组件 ( V3 / V4 ) 的搜索建议插件。
测试(首次从 URL 获取数据)
配置了 data-id,非下拉菜单选择输入则背景色警告。
测试(modal 中显示;不自动选中值;不显示按钮;)
modal test测试(首次从 URL 获取数据,显示 header,不显示按钮,忽略大小写,显示清除按钮)
clearable: true,
//可清除已输入内容ignorecase: true,
//忽略大小写effectiveFieldsAlias:{userName: "姓名"},
//有效字段别名showHeader: true,
//显示 headershowBtn: false,
//不显示下拉按钮delayUntilKeyup: true
//获取数据方式为 firstByUrl 时,延迟到有输入/获取到焦点时请求提示:
clearable
参数使用了glyphicons
图标。bootstrap v4
默认不带该图标样式,所以该参数不会生效。此时可自行在html
代码的input
输入框标签前添加i.clearable
标签元素来实现。
例如,页面中引入了font-awesome
,可添加标签为(见下一个示例):<i class="clearable fa fa-remove"></i>
测试(json 数据中获取)
默认启用空关键字检索。
百度搜索
支持逗号分隔多关键字
allowNoKeyword: false,
//无输入时不执行过滤请求multiWord: true,
//以分隔符号分割的多关键字支持separator: ",",
//多关键字支持时的分隔符getDataMethod: "url"
//总是从 URL 获取数据百度搜索(预处理关键字)
支持逗号分隔多关键字
设置前置关键字allowNoKeyword: false,
//无输入时不执行过滤请求multiWord: true,
//以分隔符号分割的多关键字支持separator: ",",
//多关键字支持时的分隔符getDataMethod: "url",
//获取数据的方式,总是从 URL 获取fnPreprocessKeyword: function(keyword) { //请求数据前,对输入关键字作预处理 return $.trim($('#preKeyword').val()) + keyword; }
百度搜索(ajax 请求前回调调整参数)
预定义关键字allowNoKeyword: false,
//无输入时不执行过滤请求multiWord: true,
//以分隔符号分割的多关键字支持separator: ",",
//多关键字支持时的分隔符getDataMethod: "url",
//总是从 URL 获取数据fnAdjustAjaxParam: function(keyword, opts) { //调整 ajax 请求参数方法,用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等 console.log('ajax 请求参数调整:', keyword, opts); return { timeout: 10000, data: { t: (new Date()).getTime(), wd: $('#customKeyword').val() + keyword } }; }
淘宝搜索 试一试
支持逗号分隔多关键字,并展示列表表头。
allowNoKeyword: false,
//无输入时不执行过滤请求multiWord: true,
//以分隔符号分割的多关键字支持separator: ",",
//多关键字支持时的分隔符getDataMethod: "url",
//总是从 URL 获取数据autoDropup: true,
//自动判断向上/下showHeader: true,
//显示多个字段的表头effectiveFieldsAlias: {Id: "序号", Keyword: "关键字", Count: "数量"}
//showHeader 时,header 别名
3.data(function() { /** * 测试(首次从 URL 获取数据) */ function initTest() { $("#test") .bsSuggest("init", { /*url: "/rest/sys/getuserlist?keyword=", effectiveFields: ["userName", "email"], searchFields: [ "shortAccount"], effectiveFieldsAlias:{userName: "姓名"},*/ clearable: true, url: "data.json", idField: "userId", keyField: "userName", showHeader: true, }) .on("onDataRequestSuccess", function(e, result) { console.log("onDataRequestSuccess: ", result); }) .on("onSetSelectValue", function(e, keyword, data) { console.log("onSetSelectValue: ", keyword, data); $('.dropdown-menu').hide(); }) .on("onUnsetSelectValue", function() { console.log("onUnsetSelectValue"); }) .on("onShowDropdown", function(e, data) { console.log("onShowDropdown", e.target.value, data); }) .on("onHideDropdown", function(e, data) { console.log("onHideDropdown", e.target.value, data); }); } //按钮方法事件监听 $("#methodTest button").on("click", function() { var method = $(this).text(); var $i; if (method === "init") { initTest(); } else { $i = $("#test").bsSuggest(method); if (typeof $i === "object") { $i = $i.data("bsSuggest"); } console.log(method, $i); if (!$i) { alert("未初始化或已销毁"); } } if (method === "version") { alert($i); } }); initTest(); /** * 测试(modal 中显示;不自动选中值;不显示按钮) */ $("#modalTest_input") .bsSuggest({ url: "data.json", effectiveFields: ["userName", "shortAccount"], searchFields: ["shortAccount"], //showHeader: false, autoSelect: false, showBtn: false, idField: "userId", keyField: "userName" }) .on("onDataRequestSuccess", function(e, result) { console.log("onDataRequestSuccess: ", result); }) .on("onSetSelectValue", function(e, keyword, data) { console.log("onSetSelectValue: ", keyword, data); }) .on("onUnsetSelectValue", function() { console.log("onUnsetSelectValue"); }); /** * 测试(首次从 URL 获取数据,显示 header,不显示按钮,忽略大小写,可清除) */ $("#testNoBtn") .bsSuggest({ url: "data.json", /*effectiveFields: ["userName", "shortAccount"], searchFields: [ "shortAccount"],*/ effectiveFieldsAlias: { userName: "姓名" }, effectiveFields: ["userId", "userName", "shortAccount"], ignorecase: true, showHeader: true, showBtn: false, //不显示下拉按钮 delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时,延迟到有输入/获取到焦点时才请求数据 idField: "userId", keyField: "userName", clearable: true }) .on("onDataRequestSuccess", function(e, result) { console.log("onDataRequestSuccess: ", result); }) .on("onSetSelectValue", function(e, keyword, data) { console.log("onSetSelectValue: ", keyword, data); }) .on("onUnsetSelectValue", function() { console.log("onUnsetSelectValue"); }); /** * 从 data参数中过滤数据 */ var dataList = { value: [] }, i = 5001; while (i--) { dataList.value.push({ id: i, word: Math.random() * 100000, description: "https://lzw.me" }); } $("#test_data") .bsSuggest({ indexId: 2, //data.value 的第几个数据,作为input输入框的内容 indexKey: 1, //data.value 的第几个数据,作为input输入框的内容 data: dataList }) .on("onDataRequestSuccess", function(e, result) { console.log( "从 json.data 参数中获取,不会触发 onDataRequestSuccess 事件", result ); }) .on("onSetSelectValue", function(e, keyword, data) { console.log("onSetSelectValue: ", keyword, data); }) .on("onUnsetSelectValue", function() { console.log("onUnsetSelectValue"); }); /** * 百度搜索 API 测试 */ $("#baidu") .bsSuggest({ emptyTip: "未检索到匹配的数据", allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求 multiWord: true, //以分隔符号分割的多关键字支持 separator: ",", //多关键字支持时的分隔符,默认为空格 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 url: "https://unionsug.baidu.com/su?p=3&wd=", //优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数 jsonp: "cb", //如果从 url 获取数据,并且需要跨域,则该参数必须设置 fnProcessData: function(json) { // url 获取数据时,对数据的处理,作为 fnGetData 的回调函数 var index, len, data = { value: [] }; if (!json || !json.s || json.s.length === 0) { return false; } len = json.s.length; for (index = 0; index < len; index++) { data.value.push({ word: json.s[index] }); } data.defaults = "baidu"; //字符串转化为 js 对象 return data; } }) .on("onDataRequestSuccess", function(e, result) { console.log("onDataRequestSuccess: ", result); }) .on("onSetSelectValue", function(e, keyword, data) { console.log("onSetSelectValue: ", keyword, data); }) .on("onUnsetSelectValue", function() { console.log("onUnsetSelectValue"); }); /** * 百度搜索 API 测试,附带关键字“手机” */ $("#baiduPreKeyword") .bsSuggest({ allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求 multiWord: true, //以分隔符号分割的多关键字支持 separator: ",", //多关键字支持时的分隔符,默认为空格 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 url: "https://unionsug.baidu.com/su?p=3&wd=" /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/, jsonp: "cb", //如果从 url 获取数据,并且需要跨域,则该参数必须设置 fnPreprocessKeyword: function(keyword) { //请求数据前,对输入关键字作进一步处理方法。注意,应返回字符串 return $("#preKeyword").val() + keyword; }, fnProcessData: function(json) { // url 获取数据时,对数据的处理,作为 fnGetData 的回调函数 var index, len, data = { value: [] }; if (!json || !json.s || json.s.length === 0) { return false; } len = json.s.length; for (index = 0; index < len; index++) { data.value.push({ word: json.s[index] }); } data.defaults = "baidu"; //字符串转化为 js 对象 return data; } }) .on("onDataRequestSuccess", function(e, result) { console.log("onDataRequestSuccess: ", result); }) .on("onSetSelectValue", function(e, keyword, data) { console.log("onSetSelectValue: ", keyword, data); }) .on("onUnsetSelectValue", function() { console.log("onUnsetSelectValue"); }); /** * 百度搜索 API 测试,ajax 参数调整回调 */ $("#baiduAdjustAjaxParam") .bsSuggest({ allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求 multiWord: true, //以分隔符号分割的多关键字支持 separator: ",", //多关键字支持时的分隔符,默认为空格 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 url: "https://unionsug.baidu.com/su?p=3" /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/, jsonp: "cb", //调整 ajax 请求参数方法,用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等 fnAdjustAjaxParam: function(keyword, opts) { console.log("ajax 请求参数调整:", keyword, opts); return { jsonp: "cb", dataType: "jsonp", timeout: 10000, data: { wd: $("#customKeyword").val() + keyword } }; }, // url 获取数据时,对数据的处理,作为 fnGetData 的回调函数 fnProcessData: function(json) { var index, len, data = { value: [] }; if (!json || !json.s || json.s.length === 0) { return false; } len = json.s.length; for (index = 0; index < len; index++) { data.value.push({ word: json.s[index] }); } data.defaults = "baidu"; //字符串转化为 js 对象 return data; } }) .on("onDataRequestSuccess", function(e, result) { console.log("onDataRequestSuccess: ", result); }) .on("onSetSelectValue", function(e, keyword, data) { console.log("onSetSelectValue: ", keyword, data); }) .on("onUnsetSelectValue", function() { console.log("onUnsetSelectValue"); }); /** * 淘宝搜索 API 测试 */ $("#taobao") .bsSuggest({ indexId: 2, //data.value 的第几个数据,作为input输入框的内容 indexKey: 1, //data.value 的第几个数据,作为input输入框的内容 allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求 multiWord: true, //以分隔符号分割的多关键字支持 separator: ",", //多关键字支持时的分隔符,默认为空格 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 showHeader: true, //显示多个字段的表头 autoDropup: true, //自动判断菜单向上展开 effectiveFieldsAlias: { Id: "序号", Keyword: "关键字" }, url: "https://suggest.taobao.com/sug?code=utf-8&extras=1&q=" /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/, jsonp: "callback", //如果从 url 获取数据,并且需要跨域,则该参数必须设置 // url 获取数据时,对数据的处理,作为 fnGetData 的回调函数 fnProcessData: function(json) { var index, len, data = { value: [] }; if (!json || !json.result || !json.result.length) { return false; } len = json.result.length; for (index = 0; index < len; index++) { data.value.push({ Id: index + 1, Keyword: json.result[index][0], Count: json.result[index][1] }); } console.log("淘宝搜索 API: ", data); return data; } }) .on("onDataRequestSuccess", function(e, result) { console.log("onDataRequestSuccess: ", result); }) .on("onSetSelectValue", function(e, keyword, data) { console.log("onSetSelectValue: ", keyword, data); }) .on("onUnsetSelectValue", function() { console.log("onUnsetSelectValue"); }); //禁用表单提交 $("form").submit(function() { // return false; }); //版本切换 $("#bsVersion button").on("click", function() { var ver = $(this).data("version"); var cdnSite = "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/"; // var cdnSite = '//stackpath.bootstrapcdn.com/bootstrap/'; $("#bscss").attr("href", cdnSite + ver + "/css/bootstrap.min.css"); $("#bsjs").attr("src", cdnSite + ver + "/js/bootstrap.min.js"); }); })(); { "message": "", "value": [ { "userName": "淳芸", "shortAccount": "chunyun", "userId": 20001, "userId2": 20001 }, { "userName": "orion-01", "shortAccount": "orion-01", "userId": 20000 }, { "userName": "唐宏禹14", "shortAccount": "TANGHONGYU", "userId": 20011 }, { "userName": "唐宏禹13", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "穆晓晨", "shortAccount": "mUXIAOCHEN", "userId": 20002 }, { "userName": "张欢引", "shortAccount": "zhanghuanyin", "userId": 20003 }, { "userName": "吴琼", "shortAccount": "wuqiong", "userId": 20004 }, { "userName": "吴东鹏", "shortAccount": "wudongpeng", "userId": 20005 }, { "userName": "黄少铅", "shortAccount": "huangshaoqian", "userId": 20006 }, { "userName": "胡运燕", "shortAccount": "yunyan", "userId": 20007 }, { "userName": "刘幸", "shortAccount": "liuxing", "userId": 20008 }, { "userName": "陈媛媛", "shortAccount": "CHENYUANYUAN", "userId": 20009 }, { "userName": "李大鹏", "shortAccount": "dapeng", "userId": 20010 }, { "userName": "唐宏禹", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "旷东林", "shortAccount": "kuangdonglin", "userId": 20010 }, { "userName": "唐宏禹15", "shortAccount": "TANGhongyu", "userId": 20011 }, { "userName": "唐宏禹12", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹11", "shortAccount": "TangHongYu", "userId": 20011 }, { "userName": "旷东林", "shortAccount": "kuangdonglin", "userId": 20010 }, { "userName": "唐宏禹10", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹9", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹8", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹7", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "旷东林", "shortAccount": "kuangdonglin", "userId": 20010 }, { "userName": "唐宏禹6", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹5", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹4", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹3", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹2", "shortAccount": "tanghongyu", "userId": 20011 }, { "userName": "唐宏禹1", "shortAccount": "tanghongyu", "userId": 20011 } ], "code": 200, "redirect": "" } - 不显示按钮;